import { CellType } from ".";
import { dom, removeItemInArray } from "../tool";

interface EditTableType {
    new(prop?: any): EditTableType;
    action: any;
    render: () => any;
}
function EditTableClass(this: EditTableType, { data, onChange, columns, value }: any = {}) {
    const container = dom('gkh-edittable');
    let dataList = data instanceof Array ? data : value;
    if (!dataList) {
        dataList = [];
    }
    dataList.forEach((item: any, index: number) => item.itemIndex = index);
    let tbody: any;
    let editRow: any;
    let delRow: any;
    let addRow: any;
    let renderItem: any;
    delRow = (item: any) => {
        const { childNodes } = tbody;
        const index = removeItemInArray(dataList, null, item, 'itemIndex');
        console.log(index);
        tbody.removeChild(childNodes[index]);
    }

    addRow = (record = {}) => {
        dataList.push(record);
        tbody.appendChild(renderItem(record, dataList.length - 1));
    }

    renderItem = (item: any) => dom('tr', {
        childs: columns.map((col: any) => {
            if (col.type == 'option') {
                let handles
                if (col.render instanceof Function) {
                    handles = col.render(item, { editRow, delRow });
                    if (handles && !(handles instanceof Array)) {
                        handles = [handles];
                    }
                }
                if (!handles) {
                    handles = [
                        dom('button', { className: 'gkh-button', innerText: '删除', listeners: { click: () => { delRow(item) } } }),
                    ]
                }
                return dom('td', {
                    childs: handles
                })
            }
            if (col.render instanceof Function) {
                let node = col.render(item);
                if (node && !(node instanceof Array)) {
                    node = [node];
                }
                return dom('td', {
                    childs: node
                })
            }
            return dom('td', {
                child: dom('input', {
                    attribute: { value: item[col.dataIndex] ? item[col.dataIndex] : '' }, listeners: {
                        change: (event: any) => {
                            item[col.dataIndex] = event.target.value;
                            if (onChange) {
                                onChange(data, col.dataIndex, event.target.value);
                            }
                        }
                    }
                })
            })
        })
    })

    this.action = {
        editRow,
        delRow,
        addRow
    }

    this.render = () => {
        tbody = dom('tbody', {
            childs: dataList.map(renderItem)
        })
        dom('table', {
            target: container,
            className: 'gkh-table',
            attribute: { border: 1 },
            childs: [
                dom('thead', { child: dom('tr', { childs: columns.map((item: any) => dom('th', { innerText: item.title })) }) }),
                tbody
            ]
        })
        dom('button', { innerText: '新增记录', listeners: { click: () => addRow() }, target: container })
        return container;
    }
    return this;
}

const EditTable = EditTableClass as unknown as EditTableType;

// 下拉框
function Select(this: CellType, attribute: any = {}, mode = 3, template?: any) {
    const me = this;
    this.type = 6;
    attribute.type = 6;
    this.attrData = attribute;
    this.parentContainer = template;
    const { placeholder = '请选择', defaultValue, disabled, readonly, list } = attribute;
    if (!list) {
        this.attrData.list = [];
    }
    let { value } = attribute;
    let attribDiv: any;
    let fieldName: any = attribute.fieldName;
    if (value === undefined || value === null) {
        value = defaultValue;
    }
    const onChnage = (arg: any) => {
        value = arg.target.value;
    }
    let selectNode: any = undefined;
    if (mode != 1) {
        selectNode = dom('select', {
            attribute: { placeholder, value },
            className: 'gkh-select',
            listeners: { change: onChnage },
            childs: list instanceof Array ? list.map((item) => dom('option', {
                innerText: item.value,
                attribute: { value: item.key }
            })) : undefined
        })
    }
    const container = dom('div', {
        child: selectNode,
    });
    const fieldNameChange = (arg: any) => {
        fieldName = arg.target.value;
        this.attrData.fieldName = fieldName;
    }
    this.setDisabled = (arg) => { };
    this.setVisible = (arg) => { };
    this.setReadonly = (arg) => { };
    this.getValue = () => {
        return value;
    };
    this.setValue = (arg) => {
        value = arg;
        if (selectNode) {
            selectNode.value = arg;
        }
    };
    this.reset = () => {
        value = defaultValue;
        selectNode.value = value;
    };
    // 设置此组件的属性  返回DOcumentNode
    this.getAttribNode = () => {
        if (attribDiv) {
            return attribDiv;
        }
        const dataSourceEdit = new EditTable({ data: this.attrData.list, columns: [{ dataIndex: 'key', title: '键' }, { dataIndex: 'value', title: '值' }, { type: 'option', title: '操作' }] });
        attribDiv = dom('div', {
            childs: [
                dom('div', { innerText: '下拉框' }),
                dom('div', {
                    style: { maxHeight: '400px', overflow: 'auto' },
                    child: dataSourceEdit.render()
                })
            ]
        });
        return attribDiv;
    }
    // 调整本组件的尺寸和位置
    this.sizeChange = () => { };
    this.getAttrData = function () {
        return this.attrData;
    }
    if (mode == 1) {
        dom('div', { target: container, childs: [dom('label', { innerText: '字段名：' }), dom('input', { attribute: { value: fieldName ? fieldName : '' }, listeners: { change: fieldNameChange } })] })
    }
    this.render = () => {
        return container;
    };
    this.renderAfter = () => {

    }
}

export default Select as unknown as CellType;